import React, { Component } from 'react';
import {
    View,Text,StyleSheet,ScrollView,FlatList,TouchableOpacity,Modal,
    Platform
} from 'react-native';
import pxToDp from '../common/comm';
import * as DATA from '../data/data';
import * as COMM from '../common/comm';

export default class FanliInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fanliInfolist: [],
            loginkey: this.props.navigation.state.params.loginkey||null
        }
    }

    static navigationOptions = {
        headerTintColor: '#fff',
        headerTitle: '返现记录',
        headerStyle: {
            backgroundColor: DATA.BASE_COLOR,
            height:Platform.OS === 'android'?pxToDp(84):pxToDp(110)
        },
        headerTitleStyle: {
            color: '#fff',
            fontSize: pxToDp(34),
            marginLeft:Platform.OS === 'android'?pxToDp(185):null
        },
        gesturesEnabled: true
    }

    componentWillMount() {
        let _that = this;
        let data2 = 'loginkey=' + this.state.loginkey;
        fetch(DATA.FANLIRECORD_URL, {
            method: "POST",
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: data2
        })
            .then((response) => {       // 数据解析方式
                //COMM._show('数据加载中...');
                if (response.ok) {
                    return response.json();
                }
            })
            .then((responseData) => {       // 获取到的数据处理
                //COMM._hide();
                if (responseData.status == 1) {
                    _that.setState({
                        fanliInfolist: responseData.list
                    })
                }
            })
            .catch((error) => { // 错误处理
                alert('获取数据失败，请重试！');
            })
            .done();
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.title}>
                    <Text style={styles.titleItem}>产品名称</Text>
                    <Text style={styles.titleItem}>投资代号</Text>
                    <Text style={styles.titleItem}>投资金额</Text>
                    <Text style={styles.titleItem}>返现金额</Text>
                    <Text style={styles.titleItem}>返现状态</Text>
                </View>
                <FanliInfoList nav={this.props.navigation} data={this.state.fanliInfolist}/>
            </View>
        );
    }
}

class FanliInfoList extends Component {
    constructor(props){
        super(props);
        this.state = {
            nav:this.props.nav,
            data:this.props.data
        };
    }
    componentWillMount() {
        if (this.props.data.length != 0) {
            for (let i = 0; i < this.props.data.length; i++) {
                this.props.data[i]["key"] = i;
            }
        }
    }

    renderItem({item}) {
        return (
            <TouchableOpacity
                style={styles.item}
                onPress={() => {this.state.nav.navigate('FanliInfoItem',{item:item})}}
            >
                <Text style={styles.content}>{item.chanpin.name}</Text>
                <Text style={styles.content}>{item.item.name}</Text>
                <Text style={styles.content}>{item.money}</Text>
                <Text style={styles.content}>{item.fanli}元</Text>
                <Text style={styles.content}>{item.status == 1 ? '未处理' : (item.status == 2 ? '已返利' : '不返利')}</Text>
            </TouchableOpacity >
        );
    }

    render() {
        return (
            <ScrollView>
                <FlatList
                    data={this.props.data}
                    renderItem={this.renderItem.bind(this)}
                >
                </FlatList>
            </ScrollView>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        paddingVertical: pxToDp(20),
        justifyContent: 'center'
    },
    title: {
        flexDirection: 'row',
        marginBottom: pxToDp(20)
    },
    titleItem: {
        flex: 1,
        fontSize: pxToDp(28),
        textAlign: 'center'
    },
    item: {
        flexDirection: 'row',
        height: pxToDp(100),
        borderBottomWidth: 1,
        borderBottomColor: '#ccc'
    },
    content: {
        flex: 1,
        fontSize: pxToDp(28),
        textAlign: 'center',
        paddingTop:pxToDp(30)
    }
});
